<template>
  <div class="bg-box">
    <Nav></Nav>
    <div class="main-box">
      <div class="first-line">
        <div class="device-info">
          <div>
            <el-descriptions title="设备信息" border>
              <el-descriptions-item label="设备名称">{{device_state.device_name}}</el-descriptions-item>
              <el-descriptions-item label="大核心">{{device_state.major}}</el-descriptions-item>
              <el-descriptions-item label="小核心">{{device_state.minor}}</el-descriptions-item>
              <el-descriptions-item label="总内存">{{(device_state.total_memory)}}
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </div>
        <div class="cloud">
          词云
        </div>
      </div>
      <div class="second-line">
        <div class="line-chart">

          <LineChart :data="lineData"></LineChart>
        </div>
        <PieChart></PieChart>
      </div>
    </div>
  </div>
</template>

<script setup>
import Nav from "@/components/Nav.vue";
import PieChart from "@/components/chart/PieChart.vue";
import LineChart from "../components/chart/LineChart.vue";
import RelationChart from "@/components/chart/RelationChart.vue";
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from "vue-router";
import { handleTrainLog } from '@/api.js'
const route = useRoute()
const router = useRouter();
const to = (url) => {
  router.push(url);
};
const userInfo = JSON.parse(localStorage.getItem('userInfo'))
let lineData = ref({})
let device_state = ref({})
handleTrainLog(route.query.id).then(res => {
  console.log(res);
  lineData.value = { test: res.test, train: res.train }
  device_state.value = res.device_state
})


</script>

<style scoped>
.bg-box {
  position: absolute;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main-box {
  margin-top: 20px;
  width: 1200px;
}

.first-line {
  height: 200px;
  width: 95%;
  display: flex;
}

.device-info {
  height: 100%;
  background-color: #eee;
  flex: 1;
  display: flex;
  align-items: center;
}

.device-img {
  width: 250px;
  height: 150px;
  background-color: #fff;
}

.device-img img {
  width: 100%;
  height: 100%;
}

.cloud {
  margin-left: 20px;
  height: 100%;
  background-color: #eee;
  flex: 1;
}

.second-line {
  height: 450px;
  width: 95%;
  display: flex;
  margin-top: 20px;
}

.line-chart {
  height: 100%;
  background-color: #eee;
  flex: 1;
}

.pie-chart {
  margin-left: 20px;
  height: 100%;
  background-color: #eee;
  flex: 1;
}
</style>